<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字排版</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <p class="h1">h1 Bootstrap 标题</p>
        <p class="h2">h2 Bootstrap 标题</p>
        <p class="h3">h3 Bootstrap 标题</p>
        <p class="h4">h4 Bootstrap 标题 </p>
        <p class="h5">h5 Bootstrap 标题</p>
        <p class="h6">h6 Bootstrap 标题</p>
      </div>

      <hr>
      <div class="container">
        <h1>Display 标题</h1>
        <p>Display 标题可以输出更大更粗的字体样式。</p>
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
      </div>
      <hr>
      <div class="container">
        <h1>更小文本标题</h1>
        <p>small 元素用于字号更小的颜色更浅的文本:</p>       
        <h1>h1 标题 <small>副标题</small></h1>
        <h2>h2 标题 <small>副标题</small></h2>
        <h3>h3 标题 <small>副标题</small></h3>
        <h4>h4 标题 <small>副标题</small></h4>
        <h5>h5 标题 <small>副标题</small></h5>
        <h6>h6 标题 <small>副标题</small></h6>
      </div>

      <div class="container">
        <h1>高亮文本</h1>    
        <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
      </div>


      <div class="container">
        <h1>Abbreviations</h1>
        <p>The abbr element is used to mark up an abbreviation or acronym:</p>
        <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
      </div>

      <div class="container">
        <h1>Blockquotes</h1>
        <p>The blockquote element is used to present content from another source:</p>
        <blockquote class="blockquote">
          <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
          <footer class="blockquote-footer">From WWF's website</footer>
        </blockquote>
      </div>

    <script src="./js/bootstrap.bundle.min.js"></script>
</body>

</html>